<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>

		<canvas id="canvas" width="800px" height="800px" style="border: 1px solid red;"></canvas>
		<script>
			function drawArrow(ctx, fromX, fromY, toX, toY, theta, headlen, width, color) {
				var theta = theta || 30,
					headlen = headlen || 10,
					width = width || 1,
					color = color || '#000',
					angle = Math.atan2(fromY - toY, fromX - toX) * 180 / Math.PI,
					angle1 = (angle + theta) * Math.PI / 180,
					angle2 = (angle - theta) * Math.PI / 180,
					topX = headlen * Math.cos(angle1),
					topY = headlen * Math.sin(angle1),
					botX = headlen * Math.cos(angle2),
					botY = headlen * Math.sin(angle2);
				ctx.save();
				ctx.beginPath();
				var arrowX = fromX - topX,
					arrowY = fromY - topY;
				ctx.moveTo(arrowX, arrowY);
				ctx.lineTo(fromX, fromY);
				arrowX = fromX - botX;
				arrowY = fromY - botY;
				ctx.lineTo(arrowX, arrowY);
				ctx.moveTo(fromX, fromY);
				ctx.lineTo(toX, toY);
				// Reverse length on the other side
				arrowX = toX + topX;
				arrowY = toY + topY;
				ctx.moveTo(arrowX, arrowY);
				ctx.lineTo(toX, toY);
				arrowX = toX + botX;
				arrowY = toY + botY;
				ctx.lineTo(arrowX, arrowY);
				ctx.strokeStyle = color;
				ctx.lineWidth = width;
				ctx.stroke();
				ctx.restore();
			}

			var can = document.getElementById('canvas');
			var ctx = can.getContext('2d');
			drawArrow(ctx, 20,100, 20,200,15,15,2,'#f36');
			
			drawArrow(ctx, 50, 40, 100,500,15,15,2,'green');
		</script>
	</body>

</html>